<template>
	<view class="check-detail">
		<view class="card">
			<view class="title">
				<view class="personal">
					<view class="store">门店：<text class="address">{{detail.store_name}}</text></view>
					<view class="person">
						核销人：<text class="name">{{detail.writer_name}}</text>
					</view>
				</view>
				<view class="date">
					<view class="total">
						服务剩余次数：{{detail.service_number || 0}}次
					</view>
					<view class="time" v-if="detail.create_time">{{detail.create_time | toDate}}</view>
				</view>
			</view>
			<view class="list" v-if="detail.goods_info">
				<view class="item" v-for='(goods, index) in detail.goods_info' :key='index'>
					<image class="avatar" :src="goods.image"></image>
					<view class="desc">
						<view class="caption">{{goods.name}}</view>
						<view class="spu-list" v-for='(sku, innerIndex) in goods.sku' :key='innerIndex'>
							<view class="spu-item">
								<view class="trait">{{sku.option.join('；')}}</view>
								<text class="num">x{{sku.number}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="check-no">
				核销单号：{{detail.order_no || ''}}
			</view>
		</view>
	</view>
</template>

<script>
	import storage from '@/commen/utils/storage'
	import {toDate} from '@/commen/utils/utils'
	import {getServiceDetail} from '@/commen/js/config'
	
	export default {
		data() {
			return {
				detail: {} // 核销详情
			};
		},
		onLoad(ops) {
			this.order_id = ops.order_id
			this.getServiceDetail()
		},
		filters: {
			// 转化时间
			toDate(time) {
				const date = toDate(time)
				return `${date[0]}.${date[1]}.${date[2]} ${date[3]}:${date[4]}`
			}
		},
		methods: {
			// 获取核销详情
			async getServiceDetail() {
				const params = {
					token: storage.get('token'),
					order_id: this.order_id
				}
				const [err, res] = await getServiceDetail(params)
				if (res) {
					this.detail = res.info
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.check-detail {
		@include box-w(100%, $bg-h);
		.card{
			margin-top:10rpx;
			.title{
				padding:50rpx 32rpx 22rpx;
				background-color: $bg-c;
				.personal{
					@include flex-row(space-between);
					.store{
						@include font-set($font-b, $color-c);
						.address{
							color:$color-i;
							font-weight: 500;
						}
					}
					.person{
						@include font-set($font-b, $color-c);
						.name{
							font-weight: 500;
						}
					}
				}
				.date{
					margin-top: 36rpx;
					@include flex-row(space-between);
					.total{
						@include font-set($font-b, $color-g);
					}
					.time{
						@include font-set($font-b, $color-d);
					}
				}
			}
			.list{
				padding:0 32rpx;
				background-color: $bg-c;
				.item{
					@include flex-row(space-between, flex-start);
					padding: 30rpx 0;
					border-top: 2rpx solid $bg-d;
					.avatar{
						@include square(160rpx);
					}
					.desc{
						width:505rpx;
						margin-left:30rpx;
						@include flex-col(center, flex-start);
						.caption{
							@include font-set($font-a, $color-c);
						}
						.spu-list{
							@include box-w(100%);
							.spu-item{
								margin-top:20rpx;
								@include flex-row(space-between);
								@include font-set($font-b, $color-d);
								.num{
									font-size:$font-c;
								}
							}
						}
					}
				}
			}
			.check-no{
				margin-top:10rpx;
				padding: 40rpx 32rpx;
				background-color: $bg-c;
				@include font-set($font-b, $color-g);
			}
		}
	}
</style>
